<template>
    <div class="asynchronousDetails">
        <div class="asynchronousDetails-common">
            <div class="asynchronousDetails-le">{{ i18n('taskName', '任务名称') }}:</div>
            <div class="asynchronousDetails-ri">{{ detailsCommon.taskName }}</div>
        </div>
        <div class="asynchronousDetails-common">
            <div class="asynchronousDetails-le">{{ i18n('createByName', '任务所属人') }}:</div>
            <div class="asynchronousDetails-ri">{{ detailsCommon.createByName }}</div>
        </div>
        <div class="asynchronousDetails-common">
            <div class="asynchronousDetails-le">{{ i18n('nodeName', '节点名称') }}:</div>
            <div class="asynchronousDetails-ri">{{ $i18(detailsCommon.nodeName, '节点名称') }}</div>
        </div>
        <div class="asynchronousDetails-common">
            <div class="asynchronousDetails-le">{{ i18n('startTime', '开始时间') }}:</div>
            <div class="asynchronousDetails-ri">{{ detailsCommon.createTime }}</div>
        </div>
        <div class="asynchronousDetails-common">
            <div class="asynchronousDetails-le">{{ i18n('endTime', '结束时间') }}:</div>
            <div class="asynchronousDetails-ri">{{ detailsCommon.endTime }}</div>
        </div>
        <div class="asynchronousDetails-common">
            <div class="asynchronousDetails-le">{{ i18n('duration', '执行时长') }}:</div>
            <div class="asynchronousDetails-ri">{{ Number(detailsCommon.duration)/1000 }} 秒</div>
        </div>
        <div class="asynchronousDetails-common">
            <div class="asynchronousDetails-le">{{ i18n('isSuccess', '执行结果') }}:</div>
            <div class="asynchronousDetails-ri">
                <view class="daibanStatus" v-if="detailsCommon" v-html="getStatusHtml(detailsCommon)"></view>
            </div>
        </div>
        <div class="asynchronousDetails-common">
            <div class="asynchronousDetails-le">{{ i18n('Information', '详细信息') }}:</div>
            <div class="asynchronousDetails-ri">
          <textarea
              style="width: 100%"
              v-model="detailsCommon.message"
              :auto-size="{ minRows: 3, maxRows: 10 }"
          /></div>
        </div>
    </div>
</template>

<script>
import {instStatusColor} from '@/common/instStatusColor.js';
import GatewayApi from "@/api/Gateway/GatewayApi";

export default {
    name: "asynchronousDetails",
    data() {
        return {
            detailsCommon: {},
            pkId:'',
        }
    },
    onLoad(params) {
        this.pkId = params.pkId
        this.init()
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "bpmLang", key);
        },
        init() {
            GatewayApi.bpmAsyncTaskGet(this.pkId).then(res => {
                this.detailsCommon = res.data;
            })
        },
        getStatusHtml(item) {
            return this.getStyByStatus(item.isSuccess);
        },
        getStyByStatus(status) {
            var str = "";
            var sts = instStatusColor[status];
            if (sts) {
                var color = sts.color;
                var background = sts.background;
                var name = sts.name;
                str = "<span  style='color:" + color + ";background:" + background + "'>" + name + "</span>";
            } else {
                str = "<span>" + status + "</span>";
            }
            return str;
        },
    }
}
</script>

<style scoped>
.asynchronousDetails {
    width: 100%;
    height: 100%;
    background: white;
    padding: 1rem;
    overflow: hidden;
    box-sizing: border-box;
}

.asynchronousDetails-common {
    display: flex;
    align-items: center;
    padding: 1rem 0rem;
    border-bottom: 1px solid #eeeeee;
}

.asynchronousDetails-le {
    min-width: 5rem;
}

.asynchronousDetails-ri {
    flex: 1;
    font-weight: normal;
    line-height: 20px;
    padding-left: .5rem;
    color: rgba(0, 0, 0, .65);
}
</style>
